<template>
    <div
          class="add-enrollment-container"
          v-if="isAdd"
    >
        <div class="steps">
            <n-steps
                  :current="currentStep"
                  :status="currentStatus"
            >
                <n-step title="检查学生账号" />
                <n-step title="完善学籍信息" />
                <n-step title="提交" />
            </n-steps>
        </div>
        <div class="step-content">
            <step1
                  v-if="currentStep === 1"
                  @validateStudent="validateStudent($event)"
            />
            <step2
                  v-else-if="currentStep === 2"
                  @previous="currentStep--"
                  :student-number="enrollmentInfo.studentNumber"
                  :school-name="$store.state.schoolName"
                  @addEnrollment="addEnrollment($event)"
            />
            <n-result v-else
                      status="success"
                      title="添加成功"
            />
        </div>
        <div class="button-container">
            <n-button-group>
                <n-space>
                    <n-button
                          v-if="currentStep === 3"
                          @click="toStepOne"
                          type="primary"
                    >
                        完成
                    </n-button>
                </n-space>
            </n-button-group>
        </div>
    </div>
    <div
          class="show-enrollment-container"
          v-else
    >
        <n-card
              hoverable
        >
            <div class="card-content-container">
                <n-descriptions
                      title="查看学籍证书"
                      label-placement="left"
                      :column="1"
                      bordered
                >
                    <n-descriptions-item label="学籍证书编号">{{ enrollmentInfo.enrollmentClaimId }}</n-descriptions-item>
                    <n-descriptions-item label="学校名称">{{ enrollmentInfo.schoolName }}</n-descriptions-item>
                    <n-descriptions-item label="学号">{{ enrollmentInfo.studentNumber }}</n-descriptions-item>
                    <n-descriptions-item label="入学时间">{{ format(enrollmentInfo.enrollTime) }}</n-descriptions-item>
                    <n-descriptions-item label="院系">{{ enrollmentInfo.collegeName }}</n-descriptions-item>
                    <n-descriptions-item label="出生年月">{{ format(enrollmentInfo.birthday) }}</n-descriptions-item>
                    <n-descriptions-item label="性别">{{ enrollmentInfo.sex==='male'? '男':'女' }}</n-descriptions-item>
                    <n-descriptions-item label="身份证号">{{ enrollmentInfo.identityCardId }}</n-descriptions-item>
                </n-descriptions>
                <n-button
                      v-show="!isSchool"
                      type="primary"
                      size="large"
                      @click="downloadEnrollment"
                >
                    下载证书
                </n-button>
                <n-button
                      v-show="linkShow"
                      text
                      id="link"
                      tag="a"
                      type="primary"
                      :href="linkHref"
                >
                    点击下载证书
                </n-button>
            </div>
        </n-card>
    </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import Step1 from '../components/addEnrollmentSteps/Step1'
import Step2 from '../components/addEnrollmentSteps/Step2'
import { useMessage } from 'naive-ui'
import api from '../api'
import { formatDate } from '../utils/function'

export default defineComponent({
    name: 'EnrollmentCard',
    props: {
        isAdd: {
            type: Boolean,
            default: false
        },
        studentNumber: {
            type: String,
            default: ''
        }
    },
    components: {
        Step1,
        Step2
    },
    
    beforeRouteEnter(to, from, next) {
        next((vm) => vm.getEnrollment())
    },
    
    computed: {
        isSchool() {
            return this.$store.state.identity === 'school'
        }
    },
    
    setup() {
        const formRef = ref(null)
        const message = useMessage()
        window.$message = useMessage()
        return {
            formRef,
            validateSuccess() {
                message.success('验证成功！')
            }
        }
    },
    data() {
        return {
            currentStep: 1,
            currentStatus: 'process',
            enrollmentInfo: {
                enrollmentClaimId: '',
                schoolName: '',
                studentNumber: '',
                enrollTime: 0,
                collegeName: '',
                birthday: 0,
                sex: '',
                identityCardId: ''
            },
            linkShow: false,
            linkHref: ''
        }
    },
    methods: {
        async getEnrollment() {
            if(!this.isAdd) {
                const resp = await api.enrollment.getEnrollment(this.$store.state.schoolName, this.studentNumber)
                this.enrollmentInfo = resp.data
            }
        },
        async addEnrollment(enrollmentInfo) {
            enrollmentInfo.studentNumber = this.enrollmentInfo.studentNumber
            enrollmentInfo.schoolName = this.$store.state.schoolName
            await api.enrollment.addEnrollment(enrollmentInfo)
            window.$message.success('添加成功！')
            this.currentStep++
        },
        toStepOne() {
            this.currentStep = 1
        },
        async validateStudent(studentNumber) {
            let resp = await api.student.findStudent(studentNumber)
            if(resp.data.length === 0) {
                window.$message.error('该学生账号不存在，请先添加')
                return
            }
            resp = await api.enrollment.enrollmentExist(studentNumber, this.$store.state.schoolName)
            if(resp.data) {
                window.$message.error('该学生学籍已存在，请勿重复添加')
                return
            }
            this.validateSuccess()
            this.enrollmentInfo.studentNumber = studentNumber
            setTimeout(() => {
                this.currentStep++
            }, 500)
        },
        downloadEnrollment() {
            this.linkShow = true
            this.linkHref = 'http://127.0.0.1:5001/api/student/downloadEnrollment?studentNumber=' + this.enrollmentInfo.studentNumber + '&schoolName=' + this.$store.state.schoolName
        },
        format(second) {
            console.log(formatDate(second))
            return formatDate(second)
        }
    }
})
</script>

<style scoped lang="less">
.add-enrollment-container {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    .steps {
        margin-top: 5%;
        margin-bottom: 5%;
    }
    .step-content {
        margin-top: 5%;
        margin-bottom: 10%;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
    }
}
.show-enrollment-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .n-card {
        width: 800px;
        height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .card-content-container {
        width: 100%;
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
</style>

<style lang="less">
.show-enrollment-container {
    .n-card__content{
        width: 100%;
    }
    .n-descriptions {
        width: 80%;
        height: 60%;
    }
    .n-button {
        margin-top: 10%;
    }
    .n-descriptions-table-header {
        width: 30%;
    }
}
</style>
